// 结构相似的数据，可以继承，并封装一些处理方法：
// data_table_item.js
export default class DataTableItems {
    constructor() {
        this.items = [];
    }

    static instance() {
        return new DataTableItems();
    }

    static clone(tableItems) {
        const newInstance = new DataTableItems();
        tableItems.items.forEach(item => {
            newInstance.add(item.text, item.className);
        });
        return newInstance;
    }

    add(text, className) {
        this.items.push({
            text: text,
            className: className
        });
        return this;
    }
}

// layout_panel.js
//41行、48行是DataTableItems的实例，tableBodyCells克隆了tableHeaders的数据结构，即实现了公用；
import React from "react";
import {injectIntl} from "react-intl";
import LayoutPanelHeader from "./layout_panel_header";
import LayoutPanelFooter from "./layout_panel_footer";
import LayoutPanelBody from "./layout_panel_body";
import DataTableItems from "./data_table_items";

class LayoutPanel extends React.Component {
    render() {
        const {messages} = this.props.intl;
        const tableHeaders = DataTableItems.instance()
            .add(messages.txt_item_roleName, "name-role")
            .add(messages.txt_item_roleExpression, "description-role");

        const tableBodyRows = [];
        if (this.props.rolelist.list) {
            this.props.rolelist.list.map((row, index) => {
                const tableBodyCells = DataTableItems.clone(tableHeaders);
                tableBodyCells.items[0].text = row.name;
                tableBodyCells.items[1].text = row.description;

                const tableBodyRow = {
                    id: row.id ? row.id : index,
                    cells: tableBodyCells.items
                };

                tableBodyRows.push(tableBodyRow);
            });
        }
        return (
            <section className="roles-manage panel">
                <LayoutPanelHeader
                    handleShow={this.props.handleShow}
                />
                <LayoutPanelBody
                    rolelist={this.props.rolelist}
                    tableHeaders={tableHeaders}
                    tableBodyRows={tableBodyRows}
                    handleWheel={this.props.handleWheel}
                    handleClick1={this.props.handleClick1}
                />
                <LayoutPanelFooter
                    rolelist={this.props.rolelist}
                />
            </section>
        )
    }
}

export default injectIntl(LayoutPanel)